<template>
  <div>
    <FormPanel ref="formPanel" :list="formList" :formType="type" @formChange="formChangeHandle" :isSubmitBtn="false" :collapse="false" labelWidth="110" />

    <BreakSpace label="操作记录" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable ref="table" :isSelectColumn="false" height="auto" :columns="columns" :dataSource="tableList" :onColumnsChange="columns => (this.columns = columns)"> </FilterTable>

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <multiuse-button type="primary" v-show="type != 'show'" :click="dataHandle.bind(this, 60831002)">提 交</multiuse-button>
      <multiuse-button type="primary" v-show="type != 'show'" :click="dataHandle.bind(this, 60831001)">保 存</multiuse-button>
      <el-button @click="closeDrawer">返 回</el-button>
    </div>

    <BaseDialog :visible.sync="isShowVin" :title="'新增'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <SearchVin :rowData="formData" @close="closeDialog" />
    </BaseDialog>
  </div>
</template>
<script>
import moment from 'moment';
import { dictionary } from '@/utils/dictMixin';
import { queryById, queryAuditLog, saveData } from '@/api/dealerSale/TestDrive/routineApply';
import SearchVin from './SearchVin';

export default {
  mixins: [dictionary],
  props: ['type', 'rowData'],
  components: {
    SearchVin
  },

  data() {
    this.saveData = null;
    this.saveData1 = null;
    return {
      formList: this.createdFrom(),
      columns: this.createdTable(),
      tableList: [],
      vinData: [],
      formData: {},
      isShowVin: false,
      vehicleId: ''
    };
  },
  created() {
    this.init();
    this.queryAuditLog();
  },
  methods: {
    async init() {
      if (this.type != 'add') {
        const res = await queryById(this.rowData.id);
        if (res.resultCode == 200) {
          this.formList.map(x => {
            x.initialValue = res.data[x.fieldName];
          });
        }
      }
    },
    async queryAuditLog() {
      const res = await queryAuditLog(this.rowData.id);
      this.tableList = [];
      if (res.resultCode == 200) {
        this.tableList = res.data;
      }
    },
    // 查询VIN
    vinHandle() {
      this.isShowVin = true;
    },
    closeDialog(val, data) {
      this.isShowVin = val;
      if (data) {
        this.vehicleId = data[0].vehicleId;
        if (Reflect.has(data[0], 'changeDate')) {
          Reflect.deleteProperty(data[0], 'changeDate');
        }
        this.setFormData(data[0]);
      }
      console.log(data, '---关闭VIN---');
    },
    setFormData(data) {
      for (let key in data) {
        this.formList.map(x => {
          if (x.fieldName == key) {
            x.initialValue = data[x.fieldName];
          }
        });
      }
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    async dataHandle(status) {
      this.$refs.formPanel.SUBMIT_FORM();
      if (this.saveData) {
        // 编辑传ID
        if (this.type == 'edit') {
          this.saveData.id = this.rowData.id ? this.rowData.id : '';
        }
        this.saveData.vehicleId = this.vehicleId ? this.vehicleId : this.rowData.vehicleId;
        this.saveData.applyStatus = status;
        let res = await saveData(this.saveData);

        if (res.resultCode == 200) {
          this.$notify.success({ title: '提示信息', message: '操作成功' });
          this.$emit('close', false, 'refresh');
        }
      }
    },
    closeDrawer() {
      this.$emit('close');
    },

    createdFrom() {
      return [
        {
          type: 'INPUT',
          label: '申请单号',
          fieldName: 'changeNo',
          placeholder: '',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '申请状态',
          fieldName: 'applyStatus',
          placeholder: '',
          initialValue: 60831001,
          itemList: this.createDictList('6083'),
          disabled: true
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '',
          readonly: true,
          rules: [{ required: true, message: '请搜索', trigger: 'change' }],
          unitRender: () => {
            return <el-button slot="append" icon="el-icon-search" onClick={() => this.vinHandle()}></el-button>;
          }
        },
        {
          type: 'INPUT',
          label: '产品代码',
          fieldName: 'productCode',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车系',
          fieldName: 'seriesName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车型',
          fieldName: 'modelName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '配置',
          fieldName: 'packageName',
          placeholder: '',
          selfCols: 2,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '内饰',
          fieldName: 'trimName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '外饰',
          fieldName: 'colorName',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '行驶里程',
          fieldName: 'allMilliage',
          placeholder: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '录入时间',
          fieldName: 'changeDate',
          placeholder: '',
          initialValue: moment().format('YYYY-MM-DD hh:mm:ss'),
          offsetRightCols: 1,
          disabled: true
        },
        {
          type: 'TEXT_AREA',
          label: '备注',
          fieldName: 'remark',
          selfCols: 3,
          placeholder: ''
        }
      ];
    },

    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '单据执行前状态',
          dataIndex: 'starStatus',
          filterType: 'checkbox',
          filterItems: this.createDictList('6083'),
          render: props => {
            return <span>{this.createDictText(props.row.starStatus, '6083')}</span>;
          }
        },
        {
          title: '单独执行后状态',
          dataIndex: 'returnStatus',
          filterType: 'checkbox',
          filterItems: this.createDictList('6083'),
          render: props => {
            return <span>{this.createDictText(props.row.returnStatus, '6083')}</span>;
          }
        },
        {
          title: '操作人员',
          dataIndex: 'createdByName'
        },
        {
          title: '操作时间',
          dataIndex: 'createdAt'
        },
        {
          title: '操作类型',
          dataIndex: 'returnStatus1',
          filterType: 'checkbox',
          filterItems: this.createDictList('6083'),
          render: props => {
            return <span>{this.createDictText(props.row.returnStatus, '6083')}</span>;
          }
        },
        {
          title: '审批意见',
          dataIndex: 'remark'
        }
      ];
    }
  }
};
</script>
